<template>
    <div>
        <el-header>
            <div class="prod_header">
                <el-breadcrumb>
                    <el-breadcrumb-item> <span class="breadcrumbText" @click="dirCrumbpage(false)">产品发布</span></el-breadcrumb-item>
                    <el-breadcrumb-item v-for="item in dirCrumb"><span class="breadcrumbText" @click="dirCrumbpage(item)">{{item.dirName}}</span></el-breadcrumb-item>
                </el-breadcrumb>
                <div class="prod_header_right">
                    <el-button type="primary" @click="addDir">新增目录</el-button>
                    <el-button type="primary" @click="addrelease">发布新产品</el-button>
                </div>
            </div>
        </el-header>
        <el-main>

            <div class="prod_header_tableData">
                <div class="column" v-for="item in tableData" @click="godetails(item)">
                    <div class="column-more" v-if="item.type=='dir'">
                        <el-popover placement="bottom" trigger="hover">
                            <div class="popover-content">
                                <span v-if="item.type == 'doc'" class="popover-content-title" @click="download(item)">下载</span>
                                <span class="popover-content-title" @click="loadDatils(item)">详情</span>
                                <span class="popover-content-title" @click="loadDel(item)">删除</span>
                            </div>
                            <i slot="reference" class="document-left-tree-more el-icon-more"></i>
                        </el-popover>
                    </div>
                    <div class="column-img" @click="documentClick(item)">
                        <el-image v-if="item.type == 'dir'" style="width: 100%;height: 100%;" :src="folderImg"></el-image>
                        <el-image v-if="item.type == 'doc'" style="width: 100%;height: 100%;" :src="fileImg"></el-image>
                    </div>
                    <span class="column-title" v-if="item.type=='dir'" @click="documentClick(item)">{{item.name}}</span>
                    <span class="column-title" v-if="item.type=='doc'" @click="godetails(item)">{{item.version}}</span>
                    <!-- <details-content ref="details" :treeData="treeData"></details-content> -->
                </div>
                <div v-if="tableData.length == 0" style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <el-empty description="暂无数据"></el-empty>
                </div>
            </div>
        </el-main>
        <div class="proj_pagination">
            <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="listclick" />
        </div>
        <el-dialog :title="'新建目录'" :visible.sync="folderVisible" width="360px">
            <div class="rename-content">
                <span class="rename-title">目录名称</span>
                <el-input class="rename-input" v-model="form.name"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="folderVisible = false">取 消</el-button>
                <el-button type="primary" @click="dirsaveclick">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" class="details" :modal-append-to-body="false" :visible.sync="detailsVisible" width="360px">
            <div class="details-item">
                <span class="details-item-title">文件标题</span>
                <span class="details-item-content">{{folderForm.name}}</span>
            </div>
            <div class="details-item">
                <span class="details-item-title">文档类型</span>
                <span class="details-item-content">产品发布</span>
            </div>
            <div class="details-item">
                <span class="details-item-title">创建者</span>
                <span class="details-item-neme">{{folderForm.createBy}}</span>
            </div>
            <div class="details-item">
                <span class="details-item-title">创建时间</span>
                <span class="details-item-content">{{folderForm.createTime}}</span>
            </div>
            <!-- <div class="details-item">
                <span class="details-item-title">文档描述</span>
                <span class="details-item-content">{{folderForm.content}}</span>
            </div> -->
        </el-dialog>
    </div>
</template>
<script>
import pagination from "@/components/Pagination";
import { list } from "@/api/prodVer";
// import {save as saveDoc, softDelete, subTaskDoc, update } from "@/api/doc.js";
import { save, del } from "@/api/dir";
import { softDelete as docDel } from "@/api/doc.js";
export default {
    components: {
        pagination,
    },
    filters: {
                docType(data) {
            if (data == "00") {
                return "项目附件";
            } else if (data == "01") {
                return "任务附件";
            } else if (data == "02") {
                return "产品文档";
            } else if (data == "04") {
                return "企业文档";
            } else if (data == "05") {
                return "合同文档";
            } else if (data == "06") {
                return "知识库";
            }
        },
        statusType(val) {
            switch (val) {
                case "00":
                    return "待审批";
                    break;
                case "01":
                    return "审批中";
                    break;
                case "02":
                    return "已审批";
                    break;
                case "03":
                    return "已驳回";
                    break;
                case "04":
                    return "已关闭";
                    break;
            }
        },
    },
    data() {
        return {
            detailsVisible: false,
            dirId: "",
            folderVisible: false,
            current: 1,
            size: 10,
            total: 0,
            tableData: [],
            dirCrumb: [],
            folderImg:
                require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            fileImg:
                require("../../../../img/文件夹.svg"),
            form: {
                name: "",
                parentDirId: "",
                dirType: "09",
                dirTypeId: "",
            },
            folderForm:{}
        };
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                this.listclick();
            },
            // 深度观察监听
            deep: true,
        },
    },
    created() {
        this.form.dirTypeId = this.$route.query.prodId;
        this.listclick();
        this.$EventBus.$on("releaseAdd", (data) => {
            this.listclick();
        });
    },
    methods: {
        loadDatils(data) {
            console.log(data);
            this.detailsVisible = true;
            this.folderForm = data;
        },
        godetails(data) {
            if (data.type == "doc") {
                let item = {
                    verId: data.verId,
                    prodId: this.$route.query.prodId,
                };
                this.$router.push({
                    path: "/produce/releasedetails",
                    query: { data: JSON.stringify(item) },
                });
            }
        },
        loadDel(data) {
            console.log(data);
            if (data.type == "dir") {
                const params = new URLSearchParams();
                params.append("ids", data.dirId);
                this.$confirm("确认删除?(有子目录时不可删除)", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    del(params).then((res) => {
                        this.$message("删除成功!");
                        this.listclick();
                    });
                });
            } else {
                // const params = new URLSearchParams();
                // params.append("ids", data.docId);
                // this.$confirm("确认删除?", "提示", {
                //     confirmButtonText: "确定",
                //     cancelButtonText: "取消",
                //     type: "warning",
                // }).then(() => {
                //     docDel(params).then((res) => {
                //         this.$message("删除成功!");
                //         this.listclick();
                //     });
                // });
            }
        },
        documentClick(data) {
            console.log(data);
            if (data.type == "dir") {
                this.dirId = data.dirId;
                this.listclick();
            }
        },
        dirCrumbpage(data) {
            if (data == false) {
                this.dirId = "";
            } else {
                this.dirId = data.dirId;
            }
            this.listclick();
        },
        dirsaveclick() {
            save(this.form).then((res) => {
                this.folderVisible = false;
                this.form.name = "";
                this.listclick();
            });
        },
        addDir() {
            this.folderVisible = true;
        },
        todetails(data) {
            let item = {
                verId: data.verId,
                prodId: this.$route.query.prodId,
                mySelf: true,
            };
            this.$router.push({
                path: "/produce/releasedetails",
                query: { data: JSON.stringify(item) },
            });
        },
        async listclick() {
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            params.append("prodId", this.$route.query.prodId);
            params.append("dirId", this.dirId);
            let res = await list(params);
            if (res.data.verData.length > 0) {
                res.data.verData.forEach(function (item) {
                    item.type = "doc";
                });
            }
            if (res.data.dirData.length > 0) {
                res.data.dirData.forEach(function (item) {
                    item.type = "dir";
                });
            }
            this.tableData = res.data.dirData.concat(res.data.verData);
            this.dirCrumb = res.data.dirCrumb;
            if (this.dirCrumb.length == 0) {
                this.form.parentDirId = "";
            } else {
                this.form.parentDirId = this.dirCrumb[
                    this.dirCrumb.length - 1
                ].dirId;
            }
            this.total = res.data.total;
        },
        addrelease() {
            this.$router.push({
                path: "/produce/release",
                query: {
                    prodId: this.$route.query.prodId,
                    dirId: this.form.parentDirId,
                },
            });
            //  this.$emit('resetForm','releaseAdd')
        },
    },
};
</script>
 <style scoped>
.prod_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prod_header_left {
    font-weight: bolder;
    text-transform: none;
    color: rgb(46, 64, 94);
    display: block;
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI",
        "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.proj_pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prod_header_tableData {
    display: flex;
    flex-wrap: wrap;
}
.column {
    position: relative;
    /* width: 160px;
    height: 185px; */
    width: 120px;
    height: 150px;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    margin-top: 10px;
}
.column:hover {
    background-color: rgb(236, 245, 255);
}
.column-more {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 12px;
}
.column-more-status {
    position: absolute;
    left: 6px;
    top: 6px;
}

.column-img {
    width: 70px;
    height: 70px;
    cursor: pointer;
}

.column-title {
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
    cursor: pointer;
}

.column-title:hover {
    color: #2c7ef8;
}
.document-left-tree-more {
    font-size: 12px;
}
.popover-content-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    cursor: pointer;
}

.popover-content-title:hover {
    background-color: #f5f6f8;
}

/deep/.el-popover {
    padding: 0;
}

.details-item {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}

.details-item-title {
    color: #909aaa;
    font-size: 14px;
}

.details-item-content {
    color: #2e405e;
    font-size: 14px;
    margin-top: 4px;
}

.details-item-neme {
    color: #2c7ef8;
    font-size: 14px;
    margin-top: 4px;
}

/deep/.el-dialog .el-dialog__footer {
    border-color: white;
}

/deep/.el-dialog__title {
    font-weight: bold;
    font-size: 16px;
}
.documentClick_item {
    margin-bottom: 10px;
    cursor: pointer;
}
.rename-title {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}
.breadcrumbText {
    cursor: pointer;
}
</style>